{__NOLAYOUT__}
<layout name="no_nav" />

<style type="text/css">
.orange {
	border-color: #FF6F3D !important;
}
div.peerpay-gift .steps .step {
	position: relative;
	margin: 0 auto;
	background: url("__PUBLIC__/Style/Home/Default/DisShop/images/peerpay_steps.png") no-repeat center center;
}

div.peerpay-gift .steps {
	height: 70px;
}

div.peerpay-gift .steps .step-3 {
	width: 33.33%;
}

div.peerpay-gift .steps .step-4 {
	width: 24.9%;
}

div.peerpay-gift .steps .step-x {
	position: relative;
	height: 34px;
	float: left;
}

.center, .text-center {
	text-align: center;
}

div.peerpay-gift .steps hr {
	position: absolute;
	margin: 0;
	top: 15px;
	width: 50%;
	border: 0px none;
	border-bottom: 2px solid #e4e4e4;
}

div.peerpay-gift .steps .step-3-1 {
	background-position: 0 0;
	width: 34px;
	height: 34px;
}

div.peerpay-gift .steps .step-3-2 {
	background-position: 0 -84px;
	width: 34px;
	height: 34px;
}

div.peerpay-gift .steps .step-3-3 {
	background-position: 0 -168px;
	width: 34px;
	height: 34px;
}

div.peerpay-gift .steps p {
	font-size: 12px;
	color: #999;
	line-height: 25px;
}
</style>

<!-- TOPBAR -->
<header class="top-bar flex-row">
	<a class="row-item row-item-auto top-bar-back" href="javascript:window.history.go(-1)">返回</a>
	<h3 class="row-item top-bar-name">找人代付</h3>
	<a class="row-item row-item-auto top-bar-menu" href="{$config.url}">主页</a>
</header>

<form action="{:U('DisShopCoquetryOrder/payAnotherPost')}" method="post">
	
	<!-- 商品清单 -->
	<section class="pr-order-item pr-good-list">
	    <h5 class="pr-good-list-title">商品清单：共&nbsp;{:count($order['orderItems'])}&nbsp;件商品</h5>
		<section class="pr-good-list-container">
			<!-- 订单商品列表 -->
			<volist name="order.orderItems" id="vo">
				<volist name="vo.items" id="vo_goodLists">
					<div class="pr-good-item flex-row">
						<a class="pr-good-pic row-item row-item-2" href="javascript:;">
							<img src="{:getImageUrl($vo_goodLists['productPic'], 'small')}">
						</a>
	
						<div class="pr-good-info row-item row-item-8">
							<h4>{$vo.productName}</h4>
							<p>规格:{$vo_goodLists['productAttr']?$vo_goodLists['productAttr']:'默认'}&nbsp;
							<p>单价:{$vo_goodLists.productPrice}&nbsp;数量:{$vo_goodLists.productNumber}&nbsp;&nbsp;
							<br>小计:{$vo_goodLists['productPrice']*$vo_goodLists['productNumber']}</p>
						</div>
					</div>
				</volist>
			</volist>
		</section>
	</section>
	
	<section class="pr-order-item" style="padding-right: 0px; padding-left: 0px;">
		<div class="peerpay-gift">
			<div class="js-onepay steps">
				<div class="step-3 step-x center">
					<hr class="orange"><hr style="right:0px;">
					<div class="step step-3-1"></div>
					<p>留言</p>
				</div>
				<div class="step-3 step-x center">
					<hr><hr style="right:0px;">
					<div class="step step-3-2"></div>
					<p>分享与朋友付款</p>
				</div>
				<div class="step-3 step-x center">
					<hr><hr style="right:0px;">
					<div class="step step-3-3"></div>
					<p>代付成功</p>
				</div>
			</div>
		</div>
	</section>
	
	<section class="pr-order-item pr-good-list">
		<h5 class="">写下对付款人想说的话</h5>
		<section style="margin-top: .5em;">
			<textarea name="say" style="width:100%; height:93px; border-radius: 0.3em;">蛋蛋的忧伤，钱不够了，你能不能帮我先垫付下？</textarea>
		</section>
	</section>
	
	<section class="pr-order-item">
		<button type="submit" class="btn btn-orange w100 pr-btn">确认找人代付</button>
	</section>
	
	<input type="hidden" name="id" value="{$order.id}">
	<input type="hidden" name="sid" value="{$sid}">

</form>

<script type="text/javascript">
$(function() {
	
  $(".pr-good-list-title").on("tap", function() {
     $(this).parent().toggleClass("open");
  }).trigger("tap");
  
});
</script>